import {
  Button,
  Modal,
  TextField,
  Icon,
  ChoiceList,
  Tabs,
  LegacyCard,
  Badge,
} from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./Hebingxiangqin.module.less";

interface ValueChildren {
  number: string;
  YSgs: string;
}
interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //显示更多
  const [XSGD, setXSGD] = useState(false);
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  //   const activator = <Button onClick={handleChange}>Open</Button>;

  const [selected, setSelected] = useState(0);

  const handleTabChange = useCallback((selectedTabIndex: number) => {
    setSelected(selectedTabIndex);
    setXSGD(false);
    // console.log(selectedTabIndex);
  }, []);

  const tabs = [
    {
      id: "all-customers-fitted-2",
      content: "概述",
      accessibilityLabel: "All customers",
      panelID: "all-customers-fitted-content-2",
    },
    {
      id: "accepts-marketing-fitted-2",
      content: "订单",
      panelID: "accepts-marketing-fitted-Ccontent-2",
    },
  ];

  return (
    <Modal
      //   activator={activator}
      open={active}
      noScroll
      titleHidden
      onClose={handleChange}
      title=""
    >
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>合并详情</div>
      </div>
      <div className={styled.CHXPO}>
        <Tabs tabs={tabs} selected={selected} onSelect={handleTabChange} fitted>
          {!selected && (
            <div>
              <LegacyCard.Section title="">
                <div className={styled.ADIVBAS1}>
                  <div>地址</div>
                  <div className={styled.AGDASH}>3</div>
                </div>
                <div className={styled.ZAUTFVWB}>
                  <div>Shaojie Shen</div>
                  <div className={styled.AGDASH}>默认</div>
                </div>
                <div>南京市秦淮区科巷一号</div>
                <div>南京</div>
                <div>伯利兹</div>
                {XSGD && (
                  <div>
                    <div className={styled.ZAUTFVWB}>
                      <div>Shaojie Shen</div>
                      <div className={styled.AGDASH}>默认</div>
                    </div>
                    <div>南京市秦淮区科巷一号</div>
                    <div>南京</div>
                    <div>伯利兹</div>
                  </div>
                )}
                {XSGD && (
                  <div>
                    <div className={styled.ZAUTFVWB}>
                      <div>Shaojie Shen</div>
                      <div className={styled.AGDASH}>默认</div>
                    </div>
                    <div>南京市秦淮区科巷一号</div>
                    <div>南京</div>
                    <div>伯利兹</div>
                  </div>
                )}
                {!XSGD && (
                  <div className={styled.AYGBCKA}>
                    <Button
                      size="slim"
                      onClick={() => {
                        setXSGD(true);
                      }}
                    >
                      显示更多内容
                    </Button>
                  </div>
                )}
              </LegacyCard.Section>
              <LegacyCard.Section>
                <div>营销</div>
                <div className={styled.SWEQASC}>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.SADBVGIH}></div>
                    <div>已订阅电子邮件</div>
                  </div>
                  <div className={styled.AIFBJWD}>
                    <div className={styled.VUGSJA}></div>
                    <div>未订阅短信</div>
                  </div>
                </div>
              </LegacyCard.Section>
              <LegacyCard.Section>
                <div>
                  这些客户没有要合并的免税项，折扣，礼品卡，元字段，备注 或
                  标签。
                </div>
              </LegacyCard.Section>
            </div>
          )}
          {selected == 1 && (
            <div>
              <LegacyCard.Section>
                <div className={styled.ADIVBAS1}>
                  <div>总订单量</div>
                  <div className={styled.AGDASH}>1</div>
                </div>
                <div className={styled.WANJFASX}>
                  <div className={styled.SHUWNBL}>
                    <div>订单 #1001</div>
                    <div className={styled.BJCKA}>
                      <Badge progress="complete">已发货</Badge>
                    </div>
                  </div>
                  <div>2022年1月6日</div>
                </div>
                <div>￥0.00来自 草稿订单</div>
              </LegacyCard.Section>
              <LegacyCard.Section>
                <div className={styled.BINKSA}>草稿订单</div>
                <div>没有草稿订单</div>
              </LegacyCard.Section>
            </div>
          )}
        </Tabs>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div style={{ marginLeft: "10px" }}>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
              setXSGD(false);
            }}
          >
            关闭
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
